<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      margin: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <canvas id="can"></canvas>

  <script>
    const oCan = document.getElementById('can');
    const documentElement = document.documentElement;
    const width = documentElement.clientWidth;
    const height = documentElement.clientHeight;
    const ctx = oCan.getContext('2d');

    oCan.width = width;
    oCan.height = height;

    // ctx.beginPath => 开启一个新的绘制路径
    // 如果需要单独设置样式的绘制路径，就要使用beginPath
    // stroke fill
    // ctx.beginPath();
    // ctx.strokeStyle = 'red';
    // ctx.lineWidth = 40;
    // ctx.moveTo(200, 100);
    // ctx.lineTo(400, 200);
    // ctx.stroke();
    
    // ctx.beginPath();
    // ctx.strokeStyle = 'blue';
    // ctx.lineWidth = 20;
    // ctx.moveTo(300, 300);
    // ctx.lineTo(500, 250);
    // ctx.stroke();

    // ctx.beginPath();
    // ctx.strokeStyle = 'red';
    // ctx.lineWidth = 40;
    // ctx.moveTo(200, 100);
    // ctx.lineTo(300, 300);
    // // ctx.stroke();

    // // ctx.beginPath();
    // // ctx.moveTo(300, 300);
    // ctx.lineTo(500, 300);
    // ctx.stroke();

    /**
     * ctx.lineWidth => 线段的宽度
     * default: 1.0
     * 0, 负数、Infinity、null 无效（忽略） =》 1.0
     */ 

    /**
     * ctx.lineCap => 线段末端的形状
     * default: butt(方形)
     * square: 方形 => 两段增加线段的长度，
     *         高度：线段的宽度
     *         宽度：线段宽度的一半
     * round: 圆形 => 两段增加线段的长度
     *        半径：线段宽度的一半
     */ 

    // ctx.beginPath();
    // ctx.moveTo(300, 100);
    // ctx.lineTo(300, 500);
    // ctx.stroke();

    // ctx.beginPath();
    // ctx.moveTo(800, 100);
    // ctx.lineTo(800, 500);
    // ctx.stroke();

    // butt
    // ctx.lineCap = 'butt'; //默认值，可以不设置

    // ctx.beginPath();
    // ctx.lineWidth = 30;
    // ctx.strokeStyle = 'red';
    // // 将绘制点（画笔）移动到x,y像素（开端）
    // ctx.moveTo(300, 200);
    // // 从绘制点开始移动路径至x,y像素（末端）
    // ctx.lineTo(800, 200);
    // ctx.stroke();

    // // square
    // ctx.lineCap = 'square';

    // ctx.beginPath();
    // ctx.lineWidth = 30;
    // ctx.strokeStyle = 'orange';
    // // 将绘制点（画笔）移动到x,y像素（开端）
    // ctx.moveTo(300, 300);
    // // 从绘制点开始移动路径至x,y像素（末端）
    // ctx.lineTo(800, 300);
    // ctx.stroke();

    // // round
    // ctx.lineCap = 'round';

    // ctx.beginPath();
    // ctx.lineWidth = 30;
    // ctx.strokeStyle = 'blue';
    // // 将绘制点（画笔）移动到x,y像素（开端）
    // ctx.moveTo(300, 400);
    // // 从绘制点开始移动路径至x,y像素（末端）
    // ctx.lineTo(800, 400);
    // ctx.stroke();

    // drawLine({
    //   moveTo: [ 300, 100 ],
    //   lineTo: [ 300, 500 ]
    // });

    // drawLine({
    //   moveTo: [ 800, 100 ],
    //   lineTo: [ 800, 500 ]
    // });

    // drawLine({
    //   width: 30,
    //   color: 'red',
    //   moveTo: [ 300, 200 ],
    //   lineTo: [ 800, 200 ]
    // });

    // drawLine({
    //   color: 'orange',
    //   cap: 'square',
    //   moveTo: [ 300, 300 ],
    //   lineTo: [ 800, 300 ]
    // });

    // drawLine({
    //   color: 'blue',
    //   cap: 'round',
    //   moveTo: [ 300, 400 ],
    //   lineTo: [ 800, 400 ]
    // });

    /**
     * ctx.lineJoin() => 连续绘制的两条线段之间填充的形状
     * default: miter (斜接) v （加一个菱形）
     * round: 扇形  (类似加一个园)
     * bevel: 斜面 ] （加了一个三角形）
     * 
     * // join的前提是连续绘制的线段（同一路径下的多条线段绘制）
     */ 

    /*
       ctx.miterLimit => 斜接面限制比例
       默认值：10.0
       
       边角的角度越小，斜接长度就越长
       为了避免斜接长度过长，可以使用miterLimit限制
       斜接长度超过miterLimit时，边角会议lineJoin的 => square、round来现实
    */

    // console.log(ctx.miterLimit);

    // drawLine({
    //   width: 30,
    //   miterLimit: 0.5,
    //   moveTo: [ 300, 100 ],
    //   lineTo: [ 500, 200 ]
    // }); 

    // drawLine({
    //   beginPath: false,
    //   lineTo: [ 300, 400 ]
    // });

    // drawLine({
    //   beginPath: false,
    //   join: 'round',
    //   lineTo: [ 600, 500 ]
    // });

    // drawLine({
    //   beginPath: false,
    //   miterLimit: 1,
    //   join: 'bevel',
    //   lineTo: [ 700, 300 ]
    // })

    /**
     * ctx.setLineDash(Array) => 设置虚线数据
     * 
     * Array: [1,   2,    3,    4]
     *         线   空    线    空
     *        [1,   2,    3]
     *        [1,   2,    3,    1,    2,    3]
     *        线    空    线     空    线    空
     * 
     * ctx.getLineDash() => 获取虚线数据
     */ 
    
    // ctx.beginPath();

    // ctx.setLineDash([ 10, 20, 30 ]);
    // ctx.moveTo(300, 100);
    // ctx.lineTo(800, 100);
    // ctx.stroke();

    // const dashData = ctx.getLineDash();
    // console.log(dashData);

    // let dashData = [ 10, 20, 30, 40 ];

    // function drawDashLine (dashData) {
    //   ctx.beginPath();
    //   ctx.setLineDash(dashData);
    //   ctx.moveTo(300, 100);
    //   ctx.lineTo(800, 100);
    //   ctx.stroke();
    // }

    // function createDynamicLine () {
    //   ctx.clearRect(0, 0, oCan.width, oCan.height);
    //   dashData = dashData.reverse();
    //   console.log(dashData);
    //   drawDashLine(dashData);
    // }

    // setInterval(createDynamicLine, 500);

    /**
     * ctx.lineDashOffset  => 虚线的偏移量
     */

    // ctx.beginPath();

    // ctx.setLineDash([ 10, 20, 30 ]);
    // ctx.moveTo(300, 100);
    // ctx.lineTo(800, 100);
    // ctx.stroke(); 

    // ctx.beginPath();

    // ctx.setLineDash([ 10, 20, 30 ]);
    // ctx.lineDashOffset = 10;
    // ctx.moveTo(300, 200);
    // ctx.lineTo(800, 200);
    // ctx.stroke(); 

    function drawLine ({
      beginPath, // boolean
      width,  // number
      color,  // string
      cap,    // string,
      join,   // string,
      miterLimit, // number
      moveTo, // []
      lineTo, // []
    }) {
      const lineCap = ['butt', 'square', 'round'];
      const lineJoin = [ 'miter', 'round', 'bevel' ];

      beginPath = beginPath === undefined ? !beginPath : beginPath;

      width && (ctx.lineWidth = width);
      color && (ctx.strokeStyle = color);
      miterLimit && (ctx.miterLimit = miterLimit);
      lineCap.includes(cap) && (ctx.lineCap = cap);
      lineJoin.includes(join) && (ctx.lineJoin = join);

      beginPath && ctx.beginPath();
      Array.isArray(moveTo) && moveTo.length === 2 && ctx.moveTo(...moveTo);
      
      if (lineTo) {
        Array.isArray(lineTo) && lineTo.length === 2 && ctx.lineTo(...lineTo);
        ctx.stroke();
      }
    }
  </script>
</body>
</html>